<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>html的拆分</title>
    <!-- 
       一个html 拆分成多个html 然后统一引入同一个html 
       1.jquery  的load
       2 object 标签的data属性

     -->
    <style lang="">
        .box1{
            width: 100px;
            height: 100px;
            background-color: aqua;
        }
        *{
            margin: 0;
            padding: 0;
        }
        .aa{
            margin-left: 100px;
        }
    </style>
    <script src="../框架相关的js/jquery-3.6.0.min.js"></script>
    <!-- <link rel="import" href="./test.html" id="page1"/> -->
</head>
<body>
    
      <div class="box1"></div>
      <div class="box2"></div>
      <div id="div1"></div>
      <object  width=100% height=100% class="aa" data="./test.html" type="text/html"></object>
    <script>
    $(".box2").load("./test.html")
    </script>
</body>
</html>